<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>登录页面</title>
		<link href="img/shouye/small_logo.png" rel="shortcut icon" />
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/weui.css" />
		<link rel="stylesheet" type="text/css" href="css/jquery-weui.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			/*头部*/
			
			.main_header {
				max-width: 640px;
				min-width: 330px;
				margin: 0px auto;
				padding-bottom: 50px;
			}
			
			.h_header {
				width: 100%;
				max-width: 640px;
				min-width: 330px;
				position: fixed;
				top: 0px;
				z-index: 9999;
				height: 50px;
				line-height: 50px;
				background-image: url(img/bgi_title.png);
				background-size: 320px 48px;
				background-color: #E62F17;
				text-align: center;
			}
			
			.h_header i {
				color: #FFFFFF;
				font-size: 25px;
				float: left;
				font-weight: bold;
			}
			
			.h_zc_title {
				font-size: 20px;
				color: white;
				font-family: Tahoma, fzltxhk, "\5fae\8f6f\96c5\9ed1";
			}
			/*登录 底部*/
			
			.main_footer {
				max-width: 640px;
				min-width: 330px;
				margin: 0px auto;
			}
			
			.mainff {
				padding-top: 50px;
				border: 2px solid #E62F17 !important;
				border-top: none !important;
			}
			
			.dsf {
				text-align: center;
				font-size: 14px;
				margin: 0px auto;
				font-family: "微软雅黑";
				color: #999999;
			}
			
			.setli li {
				width: 33%;
				float: left;
				font-size: 70px;
				text-align: center;
			}
			
			.in {
				color: #07AAEB;
			}
			
			.i2 {
				color: #ED2124;
			}
			
			.weui-row {
				width: 80%;
				margin: 0px auto;
				font-size: 85px;
			}
			
			.ta1 {
				text-align: left;
			}
			
			.ta2 {
				text-align: center;
			}
			
			.ta3 {
				text-align: right;
			}
			
			.underWord {
				font-size: 14px;
				color: #666666;
			}
			/*main content*/
			
			.main_content {
				/*border: 1px solid blueviolet;*/
				max-width: 640px;
				min-width: 330px;
				margin: 0px auto;
			}
			
			.weui_navbar_item {
				margin-top: 10px;
				background-color: #EDEDED;
				color: black;
				height: 15px;
				line-height: 15px;
			}
			
			.weui_bar_item_on {
				background-color: #E62F17 !important;
				color: white !important;
				box-shadow: 0px 2px 2px 2px #E62F17 !important;
				z-index: 9;
				height: 25px;
				margin-top: 0px;
				line-height: 32px;
			}
			
			.weui_tab_bd {
				margin-top: 0px;
			}
			
			.weui_tab_bd_item_active {
				/*background-color: #E62F17;*/
				border: 2px solid #E62F17 !important;
				border-top: 8px solid #E62F17 !important;
				border-bottom: none !important;
			}
			
			.input {
				height: 40px;
				width: 100%;
				/*border: 1px solid #DEDEDE;*/
				border: none;
				border-radius: 5px;
				font-size: 15px;
				text-indent: 20px;
				color: darkgray;
			}
			
			.input01 {
				border-bottom: 2px solid #DEDEDE !important;
				margin-top: 10px;
			}
			
			.input02 {
				border-bottom: 2px solid #DEDEDE !important;
				margin-top: 20px;
			}
			
			.input03 {
				margin-top: 30px;
				cursor: pointer;
				background-color: red;
				text-align: center;
				font-family: "微软雅黑";
				font-size: 18px !important;
				color: white !important;
				outline: none;
			}
			
			.weui_tab_bd_item {
				padding: 10px;
				padding-left: 50px;
				padding-right: 50px;
			}
			
			.other_minus {
				margin-top: 15px;
				overflow: hidden;
			}
			
			.other_minus a {
				font-size: 15px;
				color: darkgray;
			}
			
			.UserLoginTip {
				margin-top: 5px;
				background-color: rgb(217, 237, 247);
				line-height: 30px;
				text-indent: 20px;
				color: red;
				border-radius: 15px;
			}
			
			.trueB {
				border-bottom-color: cornflowerblue !important;
				color: black !important;
			}
			
			.wrongB {
				border-bottom-color: red !important;
			}
			
			#UserLoginTip {
				visibility: hidden;
			}
			#UserLoginTipPW{
				visibility: hidden;
			}
		</style>
	</head>

	<body>
		<div class="main">
			<div class="main_header">
				<header class="h_header">
					<a href="javascript:;"><i class="iconfont h_fenlei">&#xe6d4;</i></a>
					<span class="h_zc_title">登录</span>
				</header>
			</div>

			<div class="main_content">
				<div class="weui_tab">
					<div class="weui_navbar">
						<a href='#tab_userLogin' class="weui_navbar_item weui_bar_item_on">
							用户名登录
						</a>
						<a href='#tab_phoneLogin' class="weui_navbar_item">
							手机号登录
						</a>
						<a href='#tab_emailLogin' class="weui_navbar_item">
							邮箱登录
						</a>
					</div>

					<div class="weui_tab_bd">
						<!--用户名登录-->
						<div id="tab_userLogin" class="weui_tab_bd_item weui_tab_bd_item_active userLogin">
							<input type="text" class="account input input01" placeholder="用户名" />
							<p id="UserLoginTip" class="UserLoginTip"><i id="TipFontPic" class="trues iconfont iconfont-shenhe-tongguo"></i><strong id="errTip">账号密码提示</strong></p>
							<input type="password" class="input input02" placeholder="密码" />
							<p id="UserLoginTipPW" class="UserLoginTip"><i class="trues iconfont iconfont-shenhe-butongguo2"></i><strong>密码错误提示</strong></p>
							<input type="button" class="input input03" value="登录" />
							<div class="other_minus">
								<a class="fl" href="javascript:;">注册</a>
								<a class="fr" href="javascript:;">忘记密码?</a>
							</div>
						</div>
						<div id="tab_phoneLogin" class="weui_tab_bd_item">
							<input type="text" class="input input01" placeholder="用户名" />
							<p class="UserLoginTip"><i class="trues iconfont iconfont-shenhe-tongguo"></i><strong>账号密码提示</strong></p>
							<input type="password" class="input input02" placeholder="密码" />
							<p class="UserLoginTip"><i class="trues iconfont iconfont-shenhe-butongguo2"></i><strong>密码错误提示</strong></p>
							<input type="button" class="input input03" value="登录" />
							<div class="other_minus">
								<a class="fl" href="javascript:;">注册</a>
								<a class="fr" href="javascript:;">忘记密码?</a>
							</div>
						</div>
						<div id="tab_emailLogin" class="weui_tab_bd_item">
							<input type="text" class="input input01" placeholder="用户名" />
							<p class="UserLoginTip"><i class="trues iconfont iconfont-shenhe-tongguo"></i><strong>账号密码提示</strong></p>
							<input type="password" class="input input02" placeholder="密码" />
							<p class="UserLoginTip"><i class="trues iconfont iconfont-shenhe-butongguo2"></i><strong>密码错误提示</strong></p>
							<input type="button" class="input input03" value="登录" />
							<div class="other_minus">
								<a class="fl" href="javascript:;">注册</a>
								<a class="fr" href="javascript:;">忘记密码?</a>
							</div>
						</div>
					</div>
				</div>
			</div>

			<footer class="main_footer">
				<div class="mainff">
					<p class="dsf">直接使用社交网络登录</p>
					<div class="weui-row">
						<div class="weui-col-33 ta1">
							<a href="javascript:;"><i class="iconfont in">&#xe71f;</i></a>
							<p class="underWord tl ml20">支付宝</p>
						</div>
						<div class="weui-col-33 ta2">
							<a href="#"><i class="iconfont i2">&#xe6da;</i></a>
							<p class="underWord tc">微博</p>
						</div>
						<div class="weui-col-33 ta3">
							<a href="javascript:;"><i class="iconfont in">&#xe67b;</i></a>
							<p class="underWord tr mr30">QQ</p>
						</div>
					</div>
				</div>
			</footer>
		</div>

		<!--script------------------------------------------------------------------------------------------------------------->
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="lib/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>-->
		<script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(".account").focus(function() {
				$(this).addClass("trueB");

			}).blur(function() {
				$(this).removeClass("trueB");

				console.log($(this).val());
				if($(this).val() != "" && $(this).val() != null) { //输入不为空
					console.log(11111);
					var accountReX = /^[0-9a-zA-Z]{6,14}$/; //：Regular Expression正则表达式
					console.log(accountReX.test($(this).val()));
					if(accountReX.test($(this).val())) {
						console.log($(this).html());
						$(this).next().css("visibility", "visible");
						$(this).removeClass("wrongB").addClass("trueB");
						$("#TipFontPic").removeClass().addClass("trues iconfont iconfont-shenhe-tongguo").css("color", "limegreen");
						$("#errTip").html("");
					} else {
						$(this).next().css("visibility", "visible");
						$(this).addClass("wrongB");
						$("#errTip").html("密码必须是字母和数字组成且6-14位！");
						$("#TipFontPic").removeClass().addClass("trues iconfont iconfont-shenhe-butongguo2").css("color", "red");
					}

				} else { //账号输入为空
					$(this).next().css("visibility", "visible");
					$(this).addClass("wrongB"); 
					$("#errTip").html("账号输入不能为空！")
					$("#TipFontPic").removeClass().addClass("trues iconfont iconfont-shenhe-butongguo2").css("color", "red");
				}
			})
		</script>
	</body>

</html>